<template>
  <div>
    <div class="topp">
      <el-button slot="trigger" type="primary" @click="downloaddel"><i class="el-icon-download"></i>下载模板</el-button>
    </div>
    <div class="topp"> <el-upload
          ref="uploadmodel"
          :action="importurl1"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :limit="1"
          accept="application/vnd.ms-excel"
          :on-success="seccessimport"
          :on-error="errorimport"
          :auto-upload="false">
          <el-button slot="trigger" type="primary"><i class="el-icon-document"></i>选择模板</el-button>
          <el-button style="margin-left: 1.25rem;" type="success" @click="uploadMo"><i class="el-icon-upload el-icon--right"></i>上传模板</el-button>
        </el-upload>
    </div>
    <div class="topp">
      <el-upload
        ref="upload"
        :action="importurl"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :limit="1"
        accept="application/vnd.ms-excel"
        :on-success="seccessimport"
        :on-error="errorimport"
        :auto-upload="false">
        <el-button slot="trigger" type="primary"><i class="el-icon-s-order"></i>批量新增</el-button>
        <el-button style="margin-left: 1.25rem;" type="success" @click="submitUpload"><i class="el-icon-upload el-icon--right"></i>上传到服务器</el-button>
      </el-upload>
    </div>






    <!-- <el-button slot="trigger" size="small" type="primary" @click="downloaddel">下载模板</el-button>

    <el-upload
      style="margin-left:3.125rem;margin-top: 0.625rem;"
      class="upload-demo"
      ref="upload"
      :action="importurl"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :limit="1"
      accept="application/vnd.ms-excel"
      :on-success="seccessimport"
      :on-error="errorimport"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">以下为上传文件的预览：</div>
    </el-upload> -->

    <div style="margin-left:1.875rem;margin-right: 1.875rem;">
     <iframe ref="iframe" id="bdIframe" width="100%" :height="iframeH" :src="url"></iframe>
    </div>
  </div>
</template>

<script>
  import subject from '@/api/edu/subject'
  import modelfile from '@/api/edu/modelfile'
  export default{
    data(){
      return{
        url:'',
        downloadurl:'',
        importurl: '',
        importurl1: ''
      }
    },
    created(){
      this.importurl='http://localhost:8001/eduservice/edusubject/addSubject',
      this.importurl1='http://localhost:8001/eduservice/edusubject/subjectfilemodel'
    },
    methods: {
          getmodeladdr(){
            modelfile.getfilemodeladdr("课程分类模板").then(response =>{
              console.log('课程分类：',response.data.url)
              this.url='https://view.officeapps.live.com/op/view.aspx?src='+response.data.url
              this.downloadurl=response.data.url
            })
          },
          downloaddel(){
              window.location.href =this.downloadurl
          },
          submitUpload() {
            // this.importurl='http://localhost:8001/edusubject/addSubject'
            this.$refs.upload.submit();
          },
          //subjectfilemodel
          uploadMo() {
            // this.importurl1='http://localhost:8001/edusubject/subjectfilemodel'
            // document.getElementById("bdIframe").contentWindow.location.reload(true);
            this.$refs.uploadmodel.submit();
            // this.getmodeladdr()
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          },
          seccessimport(){
            this.$message({
              type: 'success',
              message: '导入成功'
            })
          },
          errorimport(){
            this.$message({
              type: 'error',
              message: '导入失败'
            })
          }
        },
    mounted () {
      this.getmodeladdr()
      /**
                   * iframe-宽高自适应显示
                   */
      const oIframe = document.getElementById('bdIframe')
      const deviceWidth = document.documentElement.clientWidth
      const deviceHeight = document.documentElement.clientHeight
      // oIframe.style.width = (Number(deviceWidth)) + 'px'; //数字是页面布局宽度差值
      oIframe.style.height = (Number(deviceHeight) - 100) + 'px' // 数字是页面布局高度差
    },
  }
</script>


<style>
.topp{
  /* width: 500px; */
  /* border: 1px solid red; */
  margin-left: 1.875rem;
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
  display: inline-block;
  margin-right: 1.25rem;
}
</style>
